<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单元素</title>
    </head>
    <body>

        <div>
            <h3>常见form元素</h3>
            <ul>
                <li> form 表示表单 </li>
                <li> &lt;input type="text"&gt; 表示单行文本框 </li>
                <li> &lt;input type="password"&gt; 表示密码框 </li>
                <li> &lt;input type="radio"&gt; 表示单选按钮/单选框 </li>
                <li> &lt;input type="checkbox"&gt; 表示多选按钮/多选框/复选框/复选按钮 </li>
                <li> &lt;input type="button"&gt; 表示普通按钮 </li>
                <li> &lt;input type="reset"&gt; 表示重置按钮 </li>
                <li> &lt;input type="submit"&gt; 表示提交按钮 </li>
                <li> &lt;input type="file"&gt; 表示文件域(用于选择需要上传的文件) </li>
                <li> &lt;textarea"&gt; 表示文本域(多行文本框) </li>
                <li> &lt;select&gt; 表示下拉框 </li>
                <li> &lt;option&gt; 表示 下拉框 中的选项 </li>
            </ul>
        </div>

        <form action="http://www.ecut.com/register" method="post">

            <fieldset>
                <legend>基本信息</legend>
                <label for="username">用户名</label>
                <input type="text" name="username" id="username">

                <br>

                <label for="password">密码</label>
                <input type="password" name="password" id="password">
            </fieldset>

            <fieldset>
                <legend>其它信息</legend>

                <span>性别</span>
                <input type="radio" name="gender" id="gender_male" value="male">
                <label for="gender_male">靓仔</label>
                <input type="radio" name="gender" id="gender_female" value="female" checked>
                <label for="gender_female">靓妹</label>

                <br>

                <span>爱好</span>
                <input type="checkbox" name="hobby" id="hobby_eat" value="eat">
                <label for="hobby_eat" >吃</label>

                <input type="checkbox" name="hobby" id="hobby_eat_ji" value="eat" checked >
                <label for="hobby_eat_ji" >吃鸡</label>

                <input type="checkbox" name="hobby" id="hobby_sleep" value="eat">
                <label for="hobby_sleep" >睡</label>

                <br>

                上传头像:
                <input type="file" name="header" id="header">

                <br>

                <label for="gaobai">真情告白</label>
                <textarea name="gaobai" id="gaobai" style="width: 300px;height: 200px; resize: none ;"></textarea>

                <br>

                <label for="hometown">籍贯</label>
                <select name="hometown" id="hometown">
                    <option value="jiagnxi">江西省</option>
                    <option value="hubei">湖北省</option>
                    <option value="anhui">安徽省</option>
                    <option value="fujian" selected>福建省</option>
                    <option value="guangdong">广东省</option>
                    <option value="guangxi">广西省</option>
                    <option value="hunan">湖南省</option>
                </select>

            </fieldset>

            <input type="button" value="普通按钮" >
            <input type="submit" value="提交按钮">
            <input type="reset" value="重置按钮">

            <hr>

            <button type="button">普通按钮</button>
            <button type="reset">重置按钮</button>
            <button type="submit">提交按钮</button>

        </form>
        
    </body>
</html>